<html>
    <head>
        <title>HTML 文档结构</title>
        <link rel="stylesheet" href="index.css"/>
    
    </head>
    <body style="color:darkorchid;">
        <div class="main">
            <div class="row">
                <input class="input" type="text" id="inputext"/>
                <input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
                <input type="button" name="bt" id="button2" value="确认2"/>
            </div>
            <div id="todogroup">
                <!--<div id="todo0"><input type="checkbox" name="todocheck">吃饭<button type="button" onclick="deleByIndex(0)">删除</button></div>
                <div>睡觉</div>-->


                <!--这里todo项-->
        
            </div>
            <div id="xx" onmouseenter="enter('xx')"  onmouseleave="leave('xx')">
            <div style="opacity:0;">1111111</div>
            <div>222222</div>
            <div style="display: none;">33333</div>
            <div>444444</div>
            </div>
            <span style="color: blue;">asd&nbsp;&nbsp;&nbsp;asd</span>
        </div>
    </body>
    <script lang="javascript">

        var intCnt = 0;
        function init(){

           // setTimeout(() => {
           //     alert("time out");
           // }, 2000);


            console.log("xxx");
            document.getElementById("button2").onclick=handleClick;
            console.log('xxxxxxxx');
        }

        function kepup(e){
            console.log(e);
            if(e.keCode==13)
            {
                handleClick();
            }
        }
        function handleClick(e){

            console.log('handleClick');
            console.log(e);

            var temp=getValue();

            //document.getElementById("todogroup").innerHTML += "<div>"+ temp +"</div>";
            //var div=document.createElement('div');
            //div.innerText = temp;
            //document.getElementById("todogroup").append(div);
            //1.追加一个div
            //2.更新input的值
            document.getElementById("todogroup").innerHTML += "<div class='item' id='todo"+intCnt+"'><input type='checkbox' name='todocheck'><div class='item-value'>"+temp+"</div><button class='item-del' type='button' onclick='deleByIndex("+intCnt+")'>删除</button></div>";
            document.getElementById("inputext").value="";
            intCnt++;
            //document.getElementsByClassName("main")[0].style="background-color:#333333;";
        }

        function getValue()
        {
            var temp = document.getElementById("inputext");
            console.log(temp.value);

            return temp.value;
        }

        function deleByIndex(index){
            document.getElementById("todo"+index).remove();
        }
        init();
    </script>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .main{
            /*background-color: aqua;
            width: 200px;
            height: 200px;*/

            padding: 8px;
            border: 1px solid #333333;
            border-radius: 8px;
        }
        .row{
            display: flex;
        }

        .item{
            display: flex;
            align-items: center;
            margin: 6px;
            padding:3px ;
        }

        .item:hover()
        {
            background-color: #dbdbdb;
            transform: scale(1.2);
        }

        .item-value{
            flex-grow: 1;
            color: #000000;
        }

        .item-del{
            color:aliceblue;
            background-color: red;
            border: 0px;
            opacity: 0;
        }

        .item:hover  .item-del{
            opacity: 1;
        }

        .input{
            padding: 8px;

            outline: none;
            border: 2px solid #b1afaf;

        }

        .input:facus{
            box-shadow:0px 0px 10px #3762d9;
            border: 2px solid #3762d9;
        }
    </style>
</html>